<%@page language="java" pageEncoding="UTF-8" contentType="text/html;charset=utf-8"%>
<%@include file="/includes/taglibs.jsp"%>
<%@page import="com.feib.soeasy.util.UserUtil"%>

<script type="text/javascript">
<!-- 
	$(document).ready(function() {
	    $( "#queryNothingBlockDiv" ).dialog( "destroy" );
	    $( "#queryNothingBlockDiv" ).dialog({  title:'<%=UserUtil.getCurrentMenuItemName() %>查詢' ,width: 300, height : 100, resizable: false, modal: true  });
	});

	$("[id^='doSaveBtn']").click(function() {
	    doSavedAction();
	});

	$("#checkAll").click(function() {
	    doAddCheckAll();
	});
	
	$("#unCheckAll").click(function() {
	    undoAddCheckAll();
	});   
	
	   $("[id^='menuItem_']").click(function() {
	        var menuItemPk = this.id.substring(9);
	        var checked = this.checked;
	        $('#addHiddenFrom input:checkbox.chk').each(function(){              
	            if (menuItemPk == this.id.substring(15))
	            {
	                if (checked) 
	                    $(this).attr("checked", true);
	                else
	                    $(this).attr("checked", false);  
	            }             
	         });        
	    });
	   
	   $("[id^='parentMenuItem_']").click(function() {
	       var parentMenuItemPk = this.id.substring(15);
	       var checked = this.checked;
	       $('#addHiddenFrom input:checkbox.chk').each(function(){
	           if (parentMenuItemPk == this.id.substring(9))
	           {
	               if (checked) $(this).attr("checked", true);
	           }
	       });   
	   });
	   
	   $("[id^='doAddUser']").click(function() {
	       $('#usersPk option:selected').each( function() {
	           $('#roleUsersPk').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");
	           $(this).remove();
	       });
	   });
	   
	   $("[id^='doRemoveUser']").click(function() {
	       $('#roleUsersPk option:selected').each( function() {
	           $('#usersPk').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");
	           $(this).remove();
	       });
	   });   	
//-->
</script>
<c:choose>
    <c:when test="${null != actionBean.menuItems}">
        <stripes:form name="addHiddenFrom" id="addHiddenFrom" beanclass="com.feib.soeasy.action.Soez9002ActionBean" 
            method="post" onsubmit="javascript: return false;">    
            <table id="queryForm">
                <tr>
                    <th>角色代碼<span id="mustKeyInStar">**</span></th>
                    <td>
                        <stripes:text id="roleNo" name="roleNo" />
                    </td>
                    <th>角色名稱<span id="mustKeyInStar">**</span></th>
                    <td>
                        <stripes:text id="roleName" name="roleName" />
                    </td>                  
                </tr>
                <tr>
                    <th>備註</th>
                    <td colspan="3">
                        <stripes:text id="roleMemo" name="roleMemo" />
                    </td>                   
                </tr>                
            </table>            

            
            <c:forEach items="${actionBean.menuItems}" var="viewObj" varStatus="rowstat">
            	<c:if test="${null == viewObj.parentMenuItem || empty viewObj.parentMenuItem}">
            	<ul>
            		<input name="checkMenuItem[${rowstat.index}].menuItemPk" type="checkbox" 
            		id="menuItem_${viewObj.menuItemPk}" value="<c:out value='${viewObj.menuItemPk}'/>" 
            		<c:if test="${viewObj.checked }">checked="checked"</c:if> class="chk" />
                    	<c:out value="${viewObj.actionName}"/>  
                        	<li>
                            	<ul>
                                	<c:forEach items="${actionBean.menuItems}" var="subViewObj" varStatus="subRowstat">                                        
                                    	<c:if test="${null != subViewObj.parentMenuItem && not empty subViewObj.parentMenuItem && viewObj.menuItemPk eq subViewObj.parentMenuItem.menuItemPk}">
                                        	<li>
                                            	<input name="checkSubMenuItem[${subRowstat.index}].menuItemPk" type="checkbox" 
                                                id="parentMenuItem_${subViewObj.parentMenuItem.menuItemPk}" value="<c:out value='${subViewObj.menuItemPk}'/>" 
                                                <c:if test="${subViewObj.checked }">checked="checked"</c:if> class="chk"/><c:out value="${subViewObj.actionName}"/>                                               
                                            </li>
                                        </c:if>
                                    </c:forEach>
                                </ul>
                            </li>
                    </ul>
                    </c:if>
                </c:forEach>

            
            <table id="addUserTable">
            	<tr>
            		<td colspan="3" id="paginationBar">
						<input type="button" id="checkAll" name="checkAll" value="全選">
						<input type="button" id="unCheckAll" name="unCheckAll" value="全不選">
            		</td>
            	</tr>
            	<tr>
            		<td colspan="3" >
						&nbsp;
            		</td>
            	</tr>
            	<tr>
            		<td>
			            <stripes:select id="usersPk" name="usersPk" multiple="multiple" size="10" >
			            	<stripes:options-collection collection="${actionBean.userOptions }" label="label" value="value"/>
			            </stripes:select>
			        </td>
            		<td>
            			<input type="button" id="doAddUser" name="doAddUser" value="加入>>" /><br/><br />
            			<input type="button" id="doRemoveUser" name="doRemoveUser" value="<<刪除" />
            		</td>
            		<td>
            			<stripes:select id="roleUsersPk" name="roleUsersPk" multiple="multiple" size="10">
            				<stripes:options-collection collection="${actionBean.roleUserOptions }" label="label" value="value"/>
            			</stripes:select>
            		</td>
            	</tr>
            	<tr>
            		<td colspan="3" id="paginationBar">
            			<input type="button" id="doSaveBtn" name="doSaveBtn" value="確認">
            		</td>
            	</tr>
            </table>
            
            <stripes:hidden id="hidden.roleUsersPk" name="roleUsersPk"/>
            <input type="hidden" id="method" name="doAjaxAddRoleAction"/>          
        </stripes:form>        
    </c:when>    
    <c:otherwise>
        <div id="queryNothingBlockDiv" style="display: none;">
            查無資料
        </div>      
    </c:otherwise>
</c:choose>       